<template>
    <div class="homeNav-box">
        <div class="homeNav-list">
            <Tabs :animated="false" class="tabs-list" @on-click="toggleTab">
                <TabPane :label="i.name" v-for="(i, k) in list" :key="k">
                    <homeNav-content></homeNav-content>
                </TabPane>
                <div style="clear: both"></div>
                <Button @click.native="showMore" size="small" slot="extra">更多 ></Button>
            </Tabs>
        </div>
        <div style="clear: both"></div>
    </div>
</template>

<script>
    import homeNavContent from '../HomeNavContent/index.vue'
    export default {
        name: "homeNav",
        props: ['list'],
        components: {
            homeNavContent
        },
        data () {
            return {
                data: this.list,
                selected: '推荐'
            }
        },
        methods: {
            toggleTab (name) {
                console.log(name)
                console.log(this.list[name])

            },
            showMore () {
                console.log('showMore')
            }
        }
    }
</script>

<style  lang="less">
    @import "../../style/style.less";
 .homeNav-box {
     width: 904px;
     background-color: #fff;
     margin-bottom: 50px !important;
     float: left;
        .homeNav-list{
            /*height: 69px;*/
         .ivu-tabs-bar{
            margin-bottom: 0;
            line-height: 66px;
          }
        .tabs-list .ivu-tabs-tab{
            font-size: 18px;
            line-height: 60px;
            height: 66px;
        }
        .tabs-list .ivu-tabs-tab:hover{
            color : @primary-color;
        }
            Button{
                background-color: white;
                border: none;
                color: #FE5371;
                font-size: 14px;
                margin-right: 5px;
                outline: none;
            }
    }
}

</style>